<template>
  <el-container style="height: 100%">
    <el-aside style="height: 100%;border-right: 1px solid #e6e6e6" width="210px">
      <el-menu :router="true"
               mode="vertical"
               text-color="#000"
               :default-active="activePath">
        <template v-for="(item,index) in menuList">
          <!-- 一级菜单 -->
          <el-menu-item v-if="!item.children || item.children.length === 0" :key="item.id" :index="item.path">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-menu"></i>
              <!-- 文本 -->
              <span style="font-family: 微软雅黑,serif">{{ item.text }}123</span>
            </template>
          </el-menu-item>
          <!-- 多级菜单 -->
          <el-submenu v-else :index="item.name">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-menu"></i>
              <!-- 文本 -->
              <span style="font-family: 微软雅黑,serif">{{ item.text }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.path"
                          @click="handleItemClick(subItem)">
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span style="font-family: 微软雅黑,serif">{{ subItem.text }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>
<script>

export default {
  name: "FeatureCenter",
  components: {

  },
  data() {
    return {
      activePath: '',
    }
  },
  mounted() {

  },
  computed: {
    menuList: function () {
      let path = this.$route.path.split("/")[1];
      let menuData = this.$store.state.NavBar.menuArr;
      window.sessionStorage.setItem("menuData", JSON.stringify(menuData));
      return menuData[path];
    }
  },

  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },

  methods: {
    handleItemClick() {

    }
  },

}
</script>

<style scoped>


.el-menu-item.is-active {
  background-color: #ecf5ff !important;
}

</style>